<template>
  <view class="vip-detail page-background">
    <view class="top-area" v-if="detailFlag">
      <view class="vip-info">
        <view class="top">
          <view class="icon">
            <image v-if="clubInfo.clubIcon" :src="clubInfo.clubIcon" mode>
            <image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" mode>
          </view>
          <view class="title line-clamp-2">{{clubInfo.clubName}}</view>
          <!-- <view @click="toDetail(clubInfo.clubId)" class="details-btn">
						消费明细
          </view>-->
        </view>
        <view class="bottom flex-box">
          <view class="label">总余额：</view>
          <view class="price">￥
            <text>{{clubInfo.account | floorTwo}}</text>
          </view>
          <view v-if="btnShow" @click="toRecharge" class="recharge-btn">充值</view>
        </view>
      </view>
      <view class="use-info">
        <view class="title">使用说明：</view>
        <text v-if="clubInfo.cardDescription">{{clubInfo.cardDescription}}</text>
        <template v-else>
          <view>1.您购买的打球卡，可用来购买俱乐部发布的所有活动。</view>
          <view>2.购买成功后，您可以随时通过"我的-我的卡券-打球卡"，查询余额或进行充值。</view>
        </template>
      </view>
    </view>
    <view class="consumption-list">
      <view v-if="detailList.length && listFlag" v-for="(item, index) in detailList" :key="index" class="item item-box">
        <view class="title">{{item.payType == '8' ? '俱乐部管理员操作' : item.content}}</view>
        <view v-if="item.payType == '8'" class="content line-clamp-1">{{item.content}}</view>
        <view class="content" v-else>{{item.type=='3'?'充值':'消费'}}</view>
        <view class="content">{{item.createDate | toFullTimeString}}</view>
        <view v-if="item.inOut=='2'" class="price green">-¥
          <text> {{Math.abs(item.amount) | floorTwo}}</text>
        </view>
        <view v-else class="price orange">+¥
          <text> {{Math.abs(item.amount) | floorTwo}}</text>
        </view>
      </view>
      <!-- 分页加载 -->
      <view v-if="detailList.length>0&&listFlag" class="scroll-bottom">
        <van-loading v-if="!isEnd" type="spinner" size="24px"/>
        <text v-else>我也是有底线的~</text>
      </view>
    </view>
    <xjx-nodata v-if="detailList.length==0&&listFlag" :marginTop="'50px'"></xjx-nodata>
    <!-- 列表无数据loading -->
    <view class="list-loading" v-if="!listFlag">
      <van-loading size="30px" vertical>加载中...</van-loading>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
  data() {
    return {
      clubInfo: {},
      vipCard: {},
      showMore: false,
      clubId: '',
      detailList: [],
      btnShow: false,
      // 列表flag
      listFlag: false,
      // 详情flag
      detailFlag: false,
      // 分页数据
      pageData: {
        pageNum: 1,
        pageSize: 20
      },
      // 分页底部loading
      loadFlag: false,
      // 底部是否有数据
      isEnd: false
    };
  },
  onLoad(data) {
    this.clubId = data.id || '';
    // this.init()
  },
  onShow() {
    this.detailList = []
    this.pageData.pageNum = 1
    this.isEnd = false
    this.loadFlag = false
    this.listFlag = false
    this.getVipCardList();
    this.getClubInfo()
  },
  computed: {
    ...mapState(['userInfo', 'accessToken'])
  },
  methods: {
    async getClubInfo() {
      const param = {
        'ACCESS-TOKEN': this.accessToken
      };
      const res = await this.$api.getByClubIdVip(param, this.clubId);
      if (res && res.code == 200) {
        this.detailFlag = true;
        this.clubInfo = res.data
        this.getDetailList();
      }
    },
    async getDetailList() {
      const params = {
        'ACCESS-TOKEN': this.accessToken,
        pageNo: this.pageData.pageNum,
        pageSize: this.pageData.pageSize,
        clubId: this.clubInfo.clubId
      };
      const res = await this.$api.getClubRecordsList(params);
      if (res && res.code == 200) {
        this.listFlag = true;
        this.loadFlag = false;
        if (res.data.list.length > 0) {
          this.detailList = [...this.detailList, ...res.data.list];
        }
        if (this.detailList.length >= res.data.count) {
          this.isEnd = true;
          return;
        }
        this.$nextTick(() => {
          this.pageData.pageNum += 1;
        });
      }
    },
    async getVipCardList() {
      const param = {
        'ACCESS-TOKEN': this.accessToken
      };
      const res = await this.$api.getClubVipCard(param, this.clubId);
      if (res && res.code == 200) {
        // this.cardList = res.data
        if (res.data.length > 0) {
          this.btnShow = true;
        }
      }
    },
    showMoreHandle() {
      this.showMore = !this.showMore;
    },
    toRecharge() {
      uni.navigateTo({
        url: `/personalCenter/vipCard/index/index?clubId=${
          this.clubInfo.clubId
        }`
      });
    },
    toDetail(id) {
      if (id) {
        uni.navigateTo({
          url: `/personalCenter/myVip/consumption/consumption?clubId=${id}`
        });
      }
    },
    toBuyCard() {
      return false;
      uni.navigateTo({
        url: ''
      });
    }
  },
  onReachBottom() {
    if (this.loadFlag) return;
    if (!this.isEnd) {
      this.loadFlag = true
      this.getDetailList()
    }
  }
};
</script>

<style scoped lang="scss">
.vip-detail {
  min-height: 100vh;
  .top-area {
    padding: 15rpx 0 20rpx;
    background-color: #ffffff;
    .vip-info {
      height: 274rpx;
      width: 738rpx;
      padding: 20rpx;
      margin: 0 auto 8rpx;
      background: url($public-baseImgUrl+'mine/vipcard-bg.png') center no-repeat;
      background-size: 100% 100%;
      position: relative;
      .top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        .icon {
          margin-right: 20rpx;
          border: 10rpx solid rgba(255, 255, 255, 0.15);
          border-radius: 50%;
          overflow: hidden;
          // background-color: #F2F2F2;
          image {
            width: 100rpx;
            height: 100rpx;
            vertical-align: middle;
          }
        }
        .title {
          color: #ffffff;
          line-height: 40rpx;
          width: 370rpx;
          max-height: 80rpx;
        }
        .details-btn {
          position: absolute;
          width: 138rpx;
          height: 45rpx;
          border-radius: 23rpx;
          border: 2rpx solid #559dfe;
          color: #e2eeff;
          font-size: 26rpx;
          text-align: center;
          line-height: 41rpx;
          right: 0;
          top: 20rpx;
        }
      }
      .bottom {
        justify-content: flex-start;
        margin-top: 40rpx;
        align-items: flex-end;
        padding-left: 140rpx;
        position: relative;
        .label {
          font-size: 24rpx;
          color: #96c2fc;
        }
        .price {
          color: #ffffff;
          font-size: 24rpx;
          text {
            font-size: 42rpx;
            line-height: 42rpx;
          }
        }
        .recharge-btn {
          width: 165rpx;
          height: 68rpx;
          line-height: 68rpx;
          border-radius: 34rpx;
          text-align: center;
          background-color: #2574de;
          color: white;
          position: absolute;
          right: 25rpx;
          top: 50%;
          margin-top: -34rpx;
        }
      }
    }
    .use-info {
      padding: 0 40rpx;
      view,text {
        line-height: 40rpx;
        font-size: 24rpx;
        color: #999;
      }
      .title {
        margin-top: 20rpx;
        margin-bottom: 6rpx;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
  .consumption-list {
    padding-bottom: 80rpx;
    box-sizing: border-box;
    .item {
      height: 190rpx;
      display: flex;
      justify-content: space-between;
      flex-flow: column;
      position: relative;
      padding: 25rpx;
      .title {
        font-size: 32rpx;
      }
      .content {
        color: $text-color-grey;
        font-size: 28rpx;
        max-width: 400rpx;
      }
      .price {
        position: absolute;
        right: 20rpx;
        top: 25rpx;
        font-size: 24rpx;
        color: $public-color-yellow1;
        text {
          margin-left: 6rpx;
          font-size: 36rpx;
        }
        &.green {
          color: #4ba71e;
        }
        &.orange {
          color: #f77350;
        }
      }
    }
    .scroll-bottom {
      padding: 10rpx 0;
      color: #ccc;
      font-size: 24rpx;
      text-align: center;
    }
  }
  .list-loading {
    width: 750rpx;
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 400rpx;
  }
  .bottom-area {
    height: 108rpx;
    position: fixed;
    bottom: 0;
    padding: 0 10rpx 0 20rpx;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    align-items: center;
    image {
      width: 31rpx;
      height: 30rpx;
      flex: 0 0 auto;
      margin-right: 15rpx;
    }
    .tips {
      flex: 1 0 auto;
      view {
        color: $text-color-grey;
        font-size: 24rpx;
        line-height: 30rpx;
      }
    }
    .price {
      color: $public-color-yellow1;
      font-size: 24rpx;
      min-width: 160rpx;
      margin-right: 30rpx;
      text {
        font-size: 42rpx;
        line-height: 42rpx;
      }
    }
    .buy-btn {
      width: 243rpx;
      height: 78rpx;
      background-color: $public-color-blue1;
      border-radius: 39rpx;
      text-align: center;
      line-height: 78rpx;
      color: #ffffff;
      font-size: 32rpx;
    }
  }
}
</style>
